<template>
  <div class="manage">
    <el-dialog
        title="新增ICT项目"
        :visible.sync="dialogVisible"
        width="33%"
        :destroy-on-close="true"
        style="text-align: center"
        :before-close="handleClose"
    >
      <!--用户的表单信息-->
      <el-form ref="form" :rules="rules" :inline="false" :model="form" label-width="120px" label-position="right">
        <el-form-item label="项目名称" prop="name">
          <el-input placeholder="请输入项目名称" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="项目时间">
          <el-date-picker
              v-model="value"
              type="datetimerange"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeTime"
              align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="项目类型" prop="businessType">
          <el-input placeholder="请输入项目类型" v-model="form.businessType"></el-input>
        </el-form-item>
        <el-form-item label="业务号码" prop="businessNumber">
          <el-input placeholder="请输入业务号码" v-model="form.businessNumber"></el-input>
        </el-form-item>
        <el-form-item label="负责人工号" prop="username">
          <el-input placeholder="请输入负责人工号" v-model="form.username"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="submit">确 定</el-button>
          </span>
    </el-dialog>

    <!--编辑工单-->
    <el-dialog
        title="编辑项目"
        :visible.sync="dialogEditVisible"
        width="33%"
        :destroy-on-close="true"
        style="text-align: center"
        :before-close="handleEditClose"
    >
      <!--用户的表单信息-->
      <el-form ref="formEdit" :rules="rulesEdit" :inline="false" :model="formEdit" label-width="120px" label-position="right">
        <el-form-item label="项目名称" prop="name">
          <el-input placeholder="请输入项目名称" v-model="formEdit.name"></el-input>
        </el-form-item>
        <el-form-item label="项目时间">
          <el-date-picker
              class="custom-date-picker"
              v-model="value1"
              type="datetimerange"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="项目类型" prop="businessType">
          <el-input placeholder="请输入项目类型" v-model="formEdit.businessType"></el-input>
        </el-form-item>
        <el-form-item label="业务号码" prop="businessNumber">
          <el-input placeholder="请输入业务号码" v-model="formEdit.businessNumber"></el-input>
        </el-form-item>
        <el-form-item label="负责人工号" prop="username">
          <el-input placeholder="请输入负责人工号" v-model="formEdit.username"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
              <el-button @click="cancelEdit">取 消</el-button>
              <el-button type="primary" @click="submitEdit">确 定</el-button>
          </span>
    </el-dialog>
    <div class="manage-header">
      <el-button @click="handleAdd" type="primary" size="mini">
        + 新增
      </el-button>
      <!--          form搜索区域-->
<!--      <el-form :inline="true" :model="userForm" size="mini">-->
<!--        <el-form-item label="状态：" prop="status">-->
<!--          <el-select v-model="userForm.status" placeholder="请选择隐患类型">-->
<!--            <el-option-->
<!--                v-for="item in statusLists"-->
<!--                :key="item.label"-->
<!--                :label="item.label"-->
<!--                :value="item.value"-->
<!--            >-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="隐患类型：" prop="type">-->
<!--          <el-select v-model="userForm.type" placeholder="请选择隐患类型">-->
<!--            <el-option label="全部类型" value=""></el-option>-->
<!--            <el-option-->
<!--                v-for="item in typelists"-->
<!--                :key="item"-->
<!--                :label="item"-->
<!--                :value="item"-->
<!--            >-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button type="success" @click="onSubmit" size="mini">查询</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
    </div>
    <div class="common-table">
      <el-table
          stripe
          height="90%"
          border
          size="mini"
          :data="tableData.slice((paginations.current-1)*paginations.pageSize,paginations.current*paginations.pageSize)"
          style="width: 100%">
        <el-table-column
            fixed
            prop="projectId"
            label="项目编号"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="name"
            label="项目名称"
            align="center"
        >
<!--          <template slot-scope="scope">-->
<!--            <div slot="reference" class="name-wrapper">-->
<!--              <el-tag size="mini" effect="dark" :type="(scope.row.type==='危险作业'?'danger':(scope.row.type==='消防安全'?'warning':''))">{{ scope.row.type }}</el-tag>-->
<!--            </div>-->
<!--          </template>-->
        </el-table-column>
        <el-table-column
            prop="startTime"
            label="项目开始时间"
            align="center"
            width="200"
        >
        </el-table-column>
        <el-table-column
            prop="endTime"
            label="项目结束时间"
            align="center"
            width="200"
        >
        </el-table-column>
        <el-table-column
            prop="username"
            label="项目负责人工号"
            align="center"
            width="200"
        >
        </el-table-column>
        <el-table-column
            prop="businessType"
            label="业务类型"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="businessNumber"
            label="业务编号"
            align="center"
            width="200"
        >
        </el-table-column>
        <el-table-column
            prop="deptName"
            label="部门"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="工单创建时间"
            align="center"
            width="200"
            v-if="false"
        >
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="200px"
            v-if="isAdmin"
        >
          <template slot-scope="scope">
            <el-button type="primary"
                       size="mini"
                       icon="el-icon-edit"
                       style="background-color: blue"
                       @click="edit(scope.row)"
                       v-if="isAdmin"
            >
              编辑
            </el-button>
            <el-button type="info"
                       icon="el-icon-s-tools"
                       size="mini"
                       :style="{background: 'red'}"
                       @click="handleDelete(scope.row)"
                       v-if="isAdmin"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="paginations.current"
            :page-sizes="[5 ,10, 20, 50, 100]"
            :page-size="paginations.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paginations.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {itemAdd, itemList, itemDelete, itemSelect, itemEdit} from "@/api/item";
import {mapGetters} from "vuex";
import Cookie from "js-cookie";
export default {
  name: "BusinessManagement",
  // computed: {
  //   ...mapGetters(['hasPermission']),
  //   isAdmin(){
  //     return this.hasPermission(this.$store.state.userInfo.roleName)
  //   },
  // },
  data(){
    return{
      dialogVisible: false,
      dialogEditVisible:false,
      isAdmin:false,
      form: {
        name:'',
        username:'',
        startTime:'',
        endTime:'',
        businessType:'',
        businessNumber:'',
      },
      formEdit:{
        projectId:'',
        name:'',
        username:'',
        startTime:'',
        endTime:'',
        businessType:'',
        businessNumber:''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入项目名称'
          }
        ],
        username: [
          {
            required: true,
            message: '请输入负责人工号'
          }
        ],
        businessType: [
          {
            required: true,
            message: '请输入项目类型'
          }
        ],
        businessNumber: [
          {
            required: true,
            message: '请输入业务编号'
          }
        ],
      },
      rulesEdit: {
        name: [
          {
            required: true,
            message: '请输入项目名称'
          }
        ],
        username: [
          {
            required: true,
            message: '请输入负责人工号'
          }
        ],
        businessType: [
          {
            required: true,
            message: '请输入项目类型'
          }
        ],
        businessNumber: [
          {
            required: true,
            message: '请输入业务编号'
          }
        ],
      },
      tableData: [],
      paginations: {
        current: 1, //当前页
        pageSize: 10, //一页显示多少条
        total: 0 //数据总数
      },
      value:'',
      value1:'',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }

  },
  created() {
    // console.log('userInfo',this.$store.state.userInfo);
    // if (this.$store.state.userInfo.roleName !==  '超级管理员' && this.$store.state.userInfo.roleName !==  '管理员'){
    //   this.isAdmin = false
    // }else{
    //   this.isAdmin  = true
    // }
    if(Cookie.get('roleName')  !==  '超级管理员' && Cookie.get('roleName')  !==  '管理员' ){
      this.isAdmin  = false
    }else {
      this.isAdmin  = true
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getList(this.paginations.current,this.paginations.pageSize)
    },
    changeTime(val){
      console.log('VAL',val)
      console.log('VALUE',this.value)
    },
    //提交用户表单
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          //后续对表单数据的处理
          if(this.value && this.value!=='' && this.value.length !== 1 && this.value[0]!==this.value[1]){
            this.form.startTime = this.value[0]
            this.form.endTime = this.value[1]
            itemAdd(this.form).then((res)=>{
              //新增用户的接口
              if(res.code===200){
                console.log('新增成功')
                this.$message.success({
                  message:res.msg,
                  type:'success'
                })
                this.getList(this.paginations.current,this.paginations.pageSize)
              }else{
                console.log(res.msg)
                this.$message.error(res.msg)
                this.getList(this.paginations.current,this.paginations.pageSize)
              }
            })
            console.log(this.form, 'form')
            //清空表单数据
            this.$refs.form.resetFields()
            this.form.name = ''
            this.form.startTime = ''
            this.form.endTime = ''
            this.form.username = ''
            this.form.businessType = ''
            this.form.businessNumber = ''
            //关闭弹窗
            this.dialogVisible = false
          }else{
            this.$message.error('请选择正确的时间区间！')
          }
        }
      })
    },
    //弹窗关闭的时候
    handleClose () {
      this.$refs.form.resetFields()
      this.form.name = ''
      this.form.startTime = ''
      this.form.endTime = ''
      this.form.username = ''
      this.form.businessType = ''
      this.form.businessNumber = ''
      this.value = ''
      this.value1 =''
      this.dialogVisible = false
    },
    cancel () {
      this.handleClose()
    },
    cancelEdit(){
      this.handleEditClose()
    },
    handleEditClose(){
      this.dialogEditVisible = false
      this.$refs.formEdit.resetFields()
      this.formEdit.projectId = ''
      this.formEdit.name = ''
      this.formEdit.startTime = ''
      this.formEdit.endTime = ''
      this.formEdit.username = ''
      this.formEdit.businessType = ''
      this.formEdit.businessNumber = ''
      this.value = ''
      this.value1 =''
    },
    edit(row){
      this.value1 = []
      this.dialogEditVisible = true
      this.formEdit.projectId = row.projectId
      this.formEdit.name = row.name
      this.formEdit.username = row.username
      this.formEdit.businessNumber = row.businessNumber
      this.formEdit.businessType  = row.businessType
      this.value1[0] = row.startTime
      this.formEdit.startTime = this.value1[0]
      this.value1[1] = row.endTime
      this.formEdit.endTime = this.value1[1]
    },
    submitEdit(){
      this.$refs.formEdit.validate((valid)=>{
        if(valid){
          itemEdit(this.formEdit).then(res=>{
            if(res.code === 200){
              this.$message.success(res.msg)
              this.dialogEditVisible = false
              this.$refs.formEdit.resetFields()
              this.getList(this.paginations.current,this.paginations.pageSize)
              // this.refreshPage()
            }else{
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    handleDelete (row) {
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText:'取消',
        type:"warning"
      }).then(() => {
        itemDelete({projectId: row.projectId}).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.getList(this.paginations.current, this.paginations.pageSize)
          }else{
            this.$message.error(res.msg)
          }
        })
      }).catch(()=>{

      })
    },
    //分页方法 前端分页
    handleCurrentChange(val) {
      this.paginations.current = val
      this.getList(val,this.paginations.pageSize);
    },
    handleSizeChange(val) {
      this.paginations.pageSize = val
      this.getList(this.paginations.current ,val);
    },
    //获取的列表数据
    getList (current,pageSize) {
      //获取的列表数据
        itemList({}).then(resp => {
          if (resp.code === 200) {
            console.log(resp.data)
            this.tableData = resp.data
            this.paginations.total = resp.data.length
            this.paginations.current = current
            this.paginations.pageSize = pageSize
          }else{
            this.$message.error(resp.msg)
          }
        })
    },
    handleAdd () {
      this.dialogVisible = true
      this.form.name = ''
      this.form.startTime = ''
      this.form.endTime = ''
      this.form.username = ''
      this.form.businessType = ''
      this.form.businessNumber = ''
      this.value = ''
      this.value1 =''
    },
    //列表的查询
    onSubmit () {
      this.getList(this.paginations.current,this.paginations.pageSize)
    },
  }
}
</script>

<style lang="less" scoped>
.manage{
  height: 100%;
  .manage-header{
    //display: flex;
    //justify-content: space-between;
    //align-items: flex-start;
    border-bottom: 1px dotted lightgrey;
    padding-bottom: 1em;
  }
  .common-table{
    margin-top: 20px;
    position: relative;
    height: 90%;
    .pager{
      position: absolute;
      bottom: 0;
      right: 20px;
    }
  }
}
//.custom-date-picker .el-input__inner {
//  width: 330px;
//}
/deep/ .el-input__inner {
  width: 400px;
}
</style>
